<template>
  <div class="page page5">
    <div class="contain">
      <p class="pageTxt animate__animated animate__fadeInDown animate__delay-1s">立即下载</p>
      <div class='contents5'>
        <div class='left-box animate__animated animate__fadeInBottomLeft animate__delay-1s'>
          <p class="pageTxt innerTxt" style='color: #2185d0bf;'>立即拥有它</p>
          <div class="downloadBox" style=''>
            <div class="downloadBox-item">
              <div class="ui teal buttons">
                <div class="ui dropdown inverted teal basic button">
                  <img src="~/assets/images/android.png" class="addImg"></img>
                  <div class="menu" style='margin-top: 50px; background: transparent;'>
                    <div class="item" data-value="drop" onclick="DownLoadNew('Android')">下载最新版</div>
                    <div class="item" data-value="horizontal flip" onclick="OnQRCode('Android')">二维码下载</div>
                  </div>
                </div>
              </div>

              <div class='tipAndroid-box' style='margin-top: 10px;'>
                <div class="ui tipAndroid" style='text-align: center; padding:10px; font-size: 10px;'>版本号:1.0.24</div>
              </div>
            </div>

            <div class="downloadBox-item">
              <div class="ui teal buttons">
                <div class="ui dropdown inverted teal basic button">
                  <img src="~/assets/images/ios.png" class="addImg"></img>
                  <div class="menu">
                    <!-- <div class="item" data-value="drop">下载最新版</div>
    									<div class="item" data-value="horizontal flip">二维码下载</div> -->
                  </div>
                </div>
              </div>

              <div class='tipIOS-box' style='margin-top: 10px;'>
                <div class="ui tipIOS" style='text-align: center; padding:10px; font-size: 10px;'>版本号:0.0.0(暂未开放)</div>
              </div>
            </div>

            <div class="downloadBox-item">
              <div class="ui teal buttons">
                <div class="ui dropdown inverted teal basic button">
                  <img src="~/assets/images/PC.png" class="addImg"></img>
                  <div class="menu">
                    <!-- <div class="item" data-value="drop">下载最新版</div> -->
                  </div>
                </div>
              </div>

              <div class='tipPC-box' style='margin-top: 10px;'>
                <div class="ui tipPC" style='text-align: center; padding:10px; font-size: 10px;'>版本号:0.0.0(暂未开放)</div>
              </div>
            </div>

          </div>
        </div>
        <div class="right-box">
          <img class='right-img animate__animated animate__fadeInBottomRight animate__delay-1s' src='~/assets/images/APPEnter.png'
            style='margin-right: -90px;'></img>
          <img class='right-img animate__animated animate__fadeInBottomRight animate__delay-1s' src='~/assets/images/FileModule.png'></img>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
</script>

<style scoped="scoped">
  .page5 .contents5 {
    display: flex;
    width: 86%;
    justify-content: space-around;
    margin-top: 120px;
    padding: 0 20px;
  }

  .page5 .contents5 .left-box {
    margin-top: 60px;
  }

  .page5 .contents5 .right-img {
    width: 250px;
    /* height: 440px; */
  }

  .downloadBox {
    display: flex;
    margin-top: 60px;
  }

  .downloadBox-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .addImg {
    height: 40px;
    width: 150px;
  }

  /*平板*/
  @media screen and (min-width:600px) and (max-width:960px) {
    .page5 .contents5 {
      display: flex;
      width: 86%;
      justify-content: space-around;
      margin-top: 120px;
      padding: 0 20px;
    }

    .page5 .contents5 .left-box {
      margin-top: 60px;
    }

    .page5 .contents5 .right-img {
      width: 175px;
      /* height: 440px; */
    }
  }

  /*手机*/
  @media screen and (max-width:600px) {
    .innerTxt {
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }

    .page5 .contents5 {
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-top: 0;
      padding: 0 10px;
    }

    .page5 .contents5 .left-box {
      margin-top: 0;
    }

    .right-box {
      display: flex;
    }

    .page5 .contents5 .right-img {
      width: 175px;
      /* height: 440px; */
    }

    .downloadBox {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-top: 0px;
    }

    .downloadBox-item {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
    }
    .addImg {
      height: 32px;
      width: 105px;
    }
  }
</style>
